{% extends "index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}
<script src='{% static "js/fields.pack.js" %}'></script>
<script src='{% static "js/uis.pack.js" %}'></script>
<script type="text/javascript">

	set={{set | jsonify}}

	
	//heads={{ heads | safe }}
	//row = {{ row | safe }}

	//errors={}

function test_par() {
	if(window.opener){
		window.opener.test_par()
	}else{
		window.haha.set_name('dog')
	}
}
	$(function () {
		haha= new Vue({
			el:'#there',
			data:{
				set:set,
				crt:set[0],
				show:false,
				name:'',
			},
			methods:{
				submit:function () {
					this.need_submit=[]
					for(var i=0;i<this.set.length;i++){
						this.need_submit.push(this.set[i])
					}
					this.$broadcast('submit')
				},
				exit:function () {
					//window.opener.haha.set_name('dog')
					test_par()
					window.close()
				},
				set_name:function (name) {
					this.name=name
				}
			},
			
			events:{
				'submit-success':function () {
					this.need_submit.pop()
					if(this.need_submit.length==0){
						location.reload()
					}
				}
			}
		})
	})

	function win_open(url) {
			//var url ='file:///D:/coblan/webcode/dev/win_open.html?p=123'
			window.open(url,location.pathname,'height=500,width=800,resizable=yes,scrollbars=yes')
	}
</script>
<div> hi there</div>
<div id='there'>
	<button name="test" type="button" value="val" @click='submit()'>Save</button>
	<div>
		<ul class='h-menu'>
			<li v-for='fields in set' :class='{"active":crt==fields}' @click='crt=fields'>
				<span v-text='fields.label'></span>
			</li>
			<span>+</span>
		</ul>
	</div>
	<div >
		<pure_form v-for='fields in set' :kw='{heads:fields.heads,row:fields.row,errors:{}}' 
			:fields_name='fields.name' v-show='crt==fields'></pure_form>
	</div>

<!--<button name="test" type="button" value="val" @click='toggle()'>open_new</button>
<button name="test" type="button" value="val" @click='exit()'>exit</button>-->
<span v-text='name'></span>
<!--<modal v-show='show' @sd_hide='show=false' :inn_style='{height:"70%",width:"80%"}'>
	    <iframe src="/hello/model/employee_set/edit/2/?next=L2hlbGxvL21vZGVsL2VtcGxveWVlX3NldC8=" frameborder="0" style='height:100%;width:100%;'></iframe>
</modal>-->
      

	
</div>

<script type="text/javascript">
	Vue.component('pure_form',{
		template:'#pure_form',
		props:['kw','fields_name'],
		methods:{
			submit:function () {
				var self =this;
				show_upload()
				var post_data=[{fun:'save',row:this.kw.row}]
				$.post('',JSON.stringify(post_data),function (data) {
					if(data.save.errors){
						self.kw.errors = data.save.errors
						hide_upload()
					}else{
						self.$dispatch('submit-success')
						setTimeout(function () {
							hide_upload()
						}, 2000);
					}
					
				})
			}
		},
		events:{
			'submit':function () {
				this.submit()
			}
		}
	})
</script>
<template id='pure_form'>
	<div>
		<field  v-for='head in kw.heads' :name='head.name' :kw='kw'></field>
	</div>
</template>
{% endblock %}